<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: kwc13
  Date: 2022/6/16
  Time: 14:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>个人中心</title>
    <link href="/Web_css/Personal_order.css" rel="stylesheet" type="text/css"/>
    <script src="/Web_page/JQuery.min.js"></script>
    <script src="/Web_js/Personal_order.js" language="JavaScript" type="text/javascript"></script>
    <script src="/Web_page/Vue.js"></script>
    <script src="/Web_oop/Oop.js"></script>
</head>
<body onload="countTime()">
    <jsp:include page="page_Header.jsp" flush="true"></jsp:include>

    <div class="personal_Level">
        <div class="personal_Center_List">
            <div class="personal_Center">
                <div class="personal_Center_Title">个人中心</div>
                <div class="personal_Center_Ul">
                    <ul>
                        <li>
                            <span onclick="display_Content(1)">我的个人中心</span>
                        </li>
                        <li>
                            <span onclick="display_Content(2)">修改密码</span>
                        </li>
                        <li>
                            <span onclick="display_Content(3)">注销服务</span>
                        </li>
                    </ul>
                </div>

                <div class="personal_Center_Title">订单中心</div>
                <div class="personal_Center_Ul">
                    <ul>
                        <li>
                            <span onclick="display_Content(4)">我的订单</span>
                        </li>
                        <li>
                            <span onclick="display_Content(5)">收货地址</span>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="address_Change correspondence" style="display: none">
                <div class="shipping_Address">
                    <div class="shipping_Address_Title">
                        <span>收货地址</span>
                    </div>
                    <div class="address_List">
                        <div class="shipping_Address_Selection">
                            <div class="shipping_Address_Name"><span>李佳欣他爹</span><a>家</a></div>
                            <div class="shipping_Address_Telephone"><span>185******71</span></div>
                            <div class="area_Show"><span>湖南省  株洲市  荷塘区  月塘街道</span><br><span class="exhibit_Address" style="margin-top: -15px;">锦龙小区</span>
                            </div>
                            <div class="change_Address">
                                <a class="revise" onclick="change_Address()">修改</a>
                            </div>
                        </div>

                        <div class="add_Address" onmouseover="add_Enter()" onmouseout="add_Leave()" onclick="add()">
                            <div class="add_Address_Img"><img src="/Web_img/settlement.png"></div>
                            <div class="add_Address_Word">
                                添加地址
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="service correspondence" style="height: 270px;display: none">
                <div class="safety" style="display: block">
                    <div class="verification_Title">
                        <span>小米帐号安全验证</span>
                    </div>
                    <div class="fill_In" style="display: block">
                        <div class="verification_Content">
                            <span>为确认身份，我们仍需验证您的安全手机</span>
                            <p>
                                点击发送验证码按钮，将会发送一条带有验证码的信息至邮箱 QQ kwc1234@qq.com
                            </p>
                        </div>
                        <div class="send_Email">
                            <button class="email_Button" onclick="log_Out()">发送邮箱</button>
                        </div>
                    </div>
                    <div class="take_Over" style="display:none;">
                        <div class="over_Content">
                            <span>请使用安全QQ邮箱 <a>kwc1234@qq.com</a> 获取验证码短信</span>
                        </div>
                        <div class="verification_Code">
                            <div class="verification_input">
                                <input type="text" placeholder="请输入验证码" class="verification_Enter" onfocus="get_focus()" onblur="set_blur()">
                                <span>重新发送</span>
                            </div>
                        </div>
                        <div class="pass">
                            <button>确定注销</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="logout correspondence" style="display: none">
                <div class="safety" style="display: block">
                    <div class="verification_Title">
                        <span>小米帐号安全验证</span>
                    </div>
                    <div class="fill_In" style="display: block">
                        <div class="verification_Content">
                            <span>为确认身份，我们仍需验证您的安全手机</span>
                            <p>
                                点击发送验证码按钮，将会发送一条带有验证码的信息至邮箱 QQ kwc1234@qq.com
                            </p>
                        </div>
                        <div class="send_Email">
                            <button class="email_Button" onclick="revise_Password()">发送邮箱</button>
                        </div>
                    </div>
                    <div class="take_Over" style="display:none;">
                        <div class="over_Content">
                            <span>请使用安全QQ邮箱 <a>kwc1234@qq.com</a> 获取验证码短信</span>
                        </div>
                        <div class="verification_Code">
                            <div class="verification_input">
                                <input type="text" placeholder="请输入验证码" class="verification_Enter" onfocus="get_focus()" onblur="set_blur()">
                                <span>重新发送</span>
                            </div>
                        </div>
                        <div class="pass">
                            <button onclick="revise_New_Password()">确定</button>
                        </div>
                    </div>
                </div>

                <div class="revise_pass" style="display: none">
                    <div class="password_Title">
                        <span>修改密码</span>
                    </div>
                    <div class="new_Password">
                        <input type="password" class="password_Enter" value="" onblur="match()" onkeyup="judging_Strength(this.value)" onfocus="get_Judge(this)" onblur="set_Judge(this)" placeholder="请输入新密码">
                        <div class="set_Aside">
                            <table width="220px" height="22px" class="strong_Weak" style="display: none">
                                <tr align="center">
                                    <td class="strength_L"></td>
                                    <td class="strength_M"></td>
                                    <td class="strength_H"></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div class="require">
                        <span>密码长度8或16位，数字、字母、字符至少包含两种</span>
                    </div>
                    <div class="new_Password">
                        <input type="password" style="margin-left: 30px;" onblur="match()" placeholder="请再次输入新密码" class="new_Password_Enter" value="">
                    </div>
                    <div style="width: 100%;height: 20px;">
                        <span class="revise_Hint"></span>
                    </div>
                    <div class="revise_button">
                        <button class="yes_no_Revise">确定</button>
                    </div>
                </div>
            </div>

            <div class="all_Orders correspondence" style="display: none">
                <div class="all_Orders_Title">
                    <span>我的订单</span><a>请谨防钓鱼链接或诈骗电话</a>
                </div>
                <div class="all_Order_Status_Title">
                    <ul>
                        <li>
                            <span style="color: #FF6700" class="corresponding_State" onclick="state(1,this)">全部有效订单</span>
                        </li>
                        <li>
                            <div class="fill_Order"></div>
                        </li>
                        <li>
                            <span class="corresponding_State"  onclick="state(2,this)">待支付</span>
                        </li>
                        <li>
                            <div class="fill_Order"></div>
                        </li>
                        <li>
                            <span class="corresponding_State"  onclick="state(3,this)">待收货</span>
                        </li>
                    </ul>
                    <div class="search_Engine">
                        <div class="search_Title">
                            <input type="text" placeholder="输入商品名称、订单号">
                        </div>
                        <div class="search_Order_Img">
                            <img src="/Web_img/search_%23fff.png">
                        </div>
                    </div>
                </div>
                <!-- 完成 -->
                <div class="valid_Order order">
                    <div class="order_Information">

                        <c:forEach var="i" end="4" begin="1">
                            <c:if test="${i >= 2}">
                                <!-- 隐藏部分 -->
                                <div class="order_Information_From" label="${i}" >
                                    <div class="order_Status">
                                        <span>已收货</span>
                                        <img src="/Web_img/personal_oder4.png">
                                    </div>
                                    <div class="information_date">
                                        <ul>
                                            <li>
                                    <span>
                                        2022年03月09日 09:40
                                    </span>
                                            </li>
                                            <li>
                                                <div class="fill_Information"></div>
                                            </li>
                                            <li>
                                    <span>
                                            ${i}
                                    </span>
                                            </li>
                                            <li>
                                                <div class="fill_Information"></div>
                                            </li>
                                            <li>
                                    <span>
                                        订单号:<a>5220309645500745</a>
                                    </span>
                                            </li>
                                            <li>
                                                <div class="fill_Information"></div>
                                            </li>
                                            <li>
                                    <span>
                                        在线支付（支付宝快捷支付）
                                    </span>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="amount_Actually_Paid">
                            <span>
                                实付金额:<a>1299.00</a>元
                            </span>
                                    </div>
                                    <div class="finished_Product">
                                        <div class="product_Information">
                                            <div class="product_Img">
                                                <img src="/Web_img/Xiaomi_television1.jpg">
                                            </div>
                                            <div class="product_Name">
                                                <span>xiaomi电视机4K高清屏幕</span><br>
                                                <a>1299.00&nbsp; ×1</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- 隐藏部分 -->
                            </c:if>

                            <c:if test="${i <= 1}">
                                <div class="order_Information_From"style="display: block" label="${i}">
                                    <div class="order_Status">
                                        <span>已收货</span>
                                        <img src="/Web_img/personal_oder4.png">
                                    </div>
                                    <div class="information_date">
                                        <ul>
                                            <li>
                                    <span>
                                        2022年03月09日 09:40
                                    </span>
                                            </li>
                                            <li>
                                                <div class="fill_Information"></div>
                                            </li>
                                            <li>
                                    <span>
                                            ${i}
                                    </span>
                                            </li>
                                            <li>
                                                <div class="fill_Information"></div>
                                            </li>
                                            <li>
                                    <span>
                                        订单号:<a>5220309645500745</a>
                                    </span>
                                            </li>
                                            <li>
                                                <div class="fill_Information"></div>
                                            </li>
                                            <li>
                                    <span>
                                        在线支付（支付宝快捷支付）
                                    </span>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="amount_Actually_Paid">
                            <span>
                                实付金额:<a>1299.00</a>元
                            </span>
                                    </div>
                                    <div class="finished_Product">
                                        <div class="product_Information">
                                            <div class="product_Img">
                                                <img src="/Web_img/Xiaomi_television1.jpg">
                                            </div>
                                            <div class="product_Name">
                                                <span>xiaomi电视机4K高清屏幕</span><br>
                                                <a>1299.00&nbsp; ×1</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </c:if>
                        </c:forEach>
                    </div>

                    <div class="pagination">
                        <div class="pagination_Left direction_Img"><img src="/Web_img/carousel_left_%23000.png" onclick="direction_Left(1)"></div>
                        <c:forEach var="i" end="4" begin="1">
                            <c:if test="${i >= 2}">
                                <div class="pagination_Choose" label="${i}" onclick="specify_Number(${i},1,this)"><a>${i}</a></div>
                            </c:if>
                            <c:if test="${i <= 1}">
                                <div class="pagination_Choose" onclick="specify_Number(${i},1,this)"><a>${i}</a></div>
                            </c:if>
                        </c:forEach>
                        <div class="pagination_Right direction_Img"><img src="/Web_img/carousel_right_%23000.png" onclick="direction_Right(1)"></div>
                    </div>
                </div>


                <!-- 待支付 -->
                <div class="unpaid order" style="display: none">
                    <div class="order_Information">

                        <c:forEach var="i" end="4" begin="1">
                            <c:if test="${i >= 2}">
                                <!-- 隐藏部分 -->
                                <div class="order_Information_From" label="${i}" >
                                    <div class="order_Status">
                                        <span>未支付</span>
                                        <img src="/Web_img/personal_oder4.png">
                                    </div>
                                    <div class="information_date">
                                        <ul>
                                            <li>
                                    <span>
                                        2022年03月09日 09:40
                                    </span>
                                            </li>
                                            <li>
                                                <div class="fill_Information"></div>
                                            </li>
                                            <li>
                                                <span>
                                                        ${i}
                                                </span>
                                            </li>
                                            <li>
                                                <div class="fill_Information"></div>
                                            </li>
                                            <li>
                                                <span>
                                                    订单号:<a>5220309645500745</a>
                                                </span>
                                            </li>
                                            <li>
                                                <div class="fill_Information"></div>
                                            </li>
                                            <li>
                                    <span>
                                        在线支付（支付宝快捷支付）
                                    </span>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="amount_Actually_Paid">
                            <span>
                                实付金额:<a>1299.00</a>元
                            </span>
                                    </div>
                                    <div class="finished_Product">
                                        <div class="product_Information">
                                            <div class="product_Img">
                                                <img src="/Web_img/Xiaomi_television1.jpg">
                                            </div>
                                            <div class="product_Name">
                                                <span>xiaomi电视机4K高清屏幕</span><br>
                                                <a>1299.00&nbsp; ×1</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- 隐藏部分 -->
                            </c:if>

                            <c:if test="${i <= 1}">
                                <div class="order_Information_From"style="display: block" label="${i}">
                                    <div class="order_Status">
                                        <span>未支付</span>
                                        <img src="/Web_img/personal_oder4.png">
                                    </div>
                                    <div class="remaining">
                                        <span>还有 <date class="dd">00</date>:<date class="hh">00</date>:<date class="mm">00</date>:<date class="ss">00</date> 付款 <a>（超出付款时间自动该订单取消）</a></span>
                                    </div>
                                    <div class="amount_Actually_Paid">
                                        <span>应付金额:<a>1299.00</a>元</span>
                                    </div>
                                    <div class="finished_Product wait_Product">
                                        <div class="product_Information">
                                            <div class="product_Img">
                                                <img src="/Web_img/Xiaomi_television1.jpg">
                                            </div>
                                            <div class="product_Name">
                                                <span>xiaomi电视机4K高清屏幕</span><br>
                                                <a>1299.00&nbsp; ×1</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </c:if>
                        </c:forEach>
                    </div>

                    <div class="pagination">
                        <div class="pagination_Left direction_Img"><img src="/Web_img/carousel_left_%23000.png" onclick="direction_Left(2)"></div>
                        <c:forEach var="i" end="4" begin="1">
                            <c:if test="${i >= 2}">
                                <div class="pagination_Choose" label="${i}" onclick="specify_Number(${i},2,this)"><a>${i}</a></div>
                            </c:if>
                            <c:if test="${i <= 1}">
                                <div class="pagination_Choose" onclick="specify_Number(${i},2,this)"><a>${i}</a></div>
                            </c:if>
                        </c:forEach>
                        <div class="pagination_Right direction_Img"><img src="/Web_img/carousel_right_%23000.png" onclick="direction_Right(2)"></div>
                    </div>
                </div>

                <!-- 待收货 -->
                <div class="pending_Receipt order" style="display: none">
                    <div class="order_Information">
                        <c:forEach var="i" end="4" begin="1">
                            <c:if test="${i >= 2}">
                                <!-- 隐藏部分 -->
                                <div class="order_Information_From" label="${i}" >
                                    <div class="order_Status">
                                        <span>已发货</span>
                                        <img src="/Web_img/personal_oder4.png">
                                    </div>
                                    <div class="information_date">
                                        <ul>
                                            <li>
                                    <span>
                                        2022年03月09日 09:40
                                    </span>
                                            </li>
                                            <li>
                                                <div class="fill_Information"></div>
                                            </li>
                                            <li>
                                    <span>
                                            ${i}
                                    </span>
                                            </li>
                                            <li>
                                                <div class="fill_Information"></div>
                                            </li>
                                            <li>
                                    <span>
                                        订单号:<a>5220309645500745</a>
                                    </span>
                                            </li>
                                            <li>
                                                <div class="fill_Information"></div>
                                            </li>
                                            <li>
                                    <span>
                                        在线支付（支付宝快捷支付）
                                    </span>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="amount_Actually_Paid">
                            <span>
                                实付金额:<a>1299.00</a>元
                            </span>
                                    </div>
                                    <div class="finished_Product">
                                        <div class="product_Information">
                                            <div class="product_Img">
                                                <img src="/Web_img/Xiaomi_television1.jpg">
                                            </div>
                                            <div class="product_Name">
                                                <span>xiaomi电视机4K高清屏幕</span><br>
                                                <a>1299.00&nbsp; ×1</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- 隐藏部分 -->
                            </c:if>

                            <c:if test="${i <= 1}">
                                <div class="order_Information_From"style="display: block" label="${i}">
                                    <div class="order_Status">
                                        <span>已发货</span>
                                        <img src="/Web_img/personal_oder4.png">
                                    </div>
                                    <div class="information_date">
                                        <ul>
                                            <li>
                                    <span>
                                        发货时间:2022年03月09日
                                    </span>
                                            </li>
                                            <li>
                                                <div class="fill_Information"></div>
                                            </li>
                                            <li>
                                    <span>
                                            ${i}
                                    </span>
                                            </li>
                                            <li>
                                                <div class="fill_Information"></div>
                                            </li>
                                            <li>
                                    <span>
                                        订单号:<a>5220309645500745</a>
                                    </span>
                                            </li>
                                            <li>
                                                <div class="fill_Information"></div>
                                            </li>
                                            <li>
                                    <span>
                                        在线支付（支付宝快捷支付）
                                    </span>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="amount_Actually_Paid">
                            <span>
                                实付金额:<a>1299.00</a>元
                            </span>
                                    </div>
                                    <div class="finished_Product">
                                        <div class="product_Information">
                                            <div class="product_Img">
                                                <img src="/Web_img/Xiaomi_television1.jpg">
                                            </div>
                                            <div class="product_Name">
                                                <span>xiaomi电视机4K高清屏幕</span><br>
                                                <a>1299.00&nbsp; ×1</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </c:if>
                        </c:forEach>
                    </div>

                    <div class="pagination">
                        <div class="pagination_Left direction_Img"><img src="/Web_img/carousel_left_%23000.png" onclick="direction_Left(3)"></div>
                        <c:forEach var="i" end="4" begin="1">
                            <c:if test="${i >= 2}">
                                <div class="pagination_Choose" label="${i}" onclick="specify_Number(${i},3,this)"><a>${i}</a></div>
                            </c:if>
                            <c:if test="${i <= 1}">
                                <div class="pagination_Choose" onclick="specify_Number(${i},3,this)"><a>${i}</a></div>
                            </c:if>
                        </c:forEach>
                        <div class="pagination_Right direction_Img"><img src="/Web_img/carousel_right_%23000.png" onclick="direction_Right(3)"></div>
                    </div>
                </div>
            </div>

            <div class="what_Show correspondence" style="display: block">
                <div class="personal_Display">
                    <div class="personal_Avatar">
                        <img src="/Web_img/Xiaomi_default_avatar.jpg">
                    </div>
                    <div class="personal_Name">
                        <span>李佳欣</span><br>
                        <span class="date">时间点</span><br>
                        <span>ID:2467584005</span>
                    </div>
                    <script>
                        var oop = new JQuery_oop();
                        oop.date()
                    </script>
                    <div class="bind_Email">
                        <span>绑定邮箱:</span><span class="email">kwc1234@qq.com</span>
                    </div>
                </div>
                <div class="all_Item_States">
                    <div class="to_Be_Paid to_Be">
                        <img src="/Web_img/Personal_order1.png">
                        <span>待支付的订单：<a>0</a><p>待支付订单 &nbsp;></p></span>
                    </div>
                    <div class="to_Be_Delivered to_Be">
                        <img src="/Web_img/Personal_order2.png">
                        <span>购物车的商品：<a>2</a><p>查看购物车</p></span>
                    </div>
                    <div class="to_Be_Paid to_Be">
                        <img src="/Web_img/Personal_order3.png">
                        <span>待收货的订单：<a>0</a><p>待收货订单 &nbsp;></p></span>
                    </div>
                </div>
            </div>
            <script>
                getTimeState();
            </script>
        </div>
    </div>

    <jsp:include page="footer.jsp" flush="true"></jsp:include>


    <!-- 隐藏部分 -->
    <div class="hint" style="display: none" >
        <div class="blinded">
        </div>
        <div class="hint_Revise">
            <div class="hint_Title">
                <span class="change_Address_Title">修改地址</span><img src="/Web_img/×.png" onmouseover="show_Imgred()" onmouseout="disappear_Img()" class="hint_Img">
            </div>
            <div style="display: inline-flex;">
                <div class="revise_Name">
                    <span class="name_Title">姓名</span>
                    <input type="text" class="name" onfocus="name_Up()" onblur="name_Down()" value="" name="name">
                </div>
                <div class="revise_Name">
                    <span class="phone_Title">手机号</span>
                    <input type="text" class="phone_Number" onfocus="phone_Up()" onblur="phone_Down()" value="" name="phone_Number">
                </div>
            </div>
            <div class="address">
                <div class="edit_Address">
                    <span class="address_Word">省级  市级  区县  区域</span><img src="/Web_img/Shopping_cart_2.png" class="address_Img">
                </div>
            </div>
            <div class="address_Text">
                <span class="address_Character">详细地址</span>
                <textarea name="description" class="specific_address" onfocus="address_Up()" onblur="address_Down()"></textarea>
            </div>
            <div class="label">
                <span class="label_Word">地址标签</span>
                <input type="text" class="address_Label" onfocus="label_Up()" onblur="label_Down()">
            </div>
            <div class="operate">
                <a class="confirm">确认</a> <span class="cancel">取消</span>
            </div>
            <div class="region_selection">
                <div>
                    <img src="/Web_img/×.png" class="remove_Img">
                </div>
                <div class="show_Selected_Regions">
                    <span class="province" onclick="provinces_Show()">选择省份/自治区</span>
                    <span class="city" style="display: none;margin-left: 10px;">选择城市/地区</span>
                    <span class="districts_Counties" style="display: none;margin-left: 10px;">选择区县</span>
                    <span class="delivery_Area" style="display: none;margin-left: 10px;">选择配送区域</span>
                </div>
                <div class="selected_Regions">
                    <a class="area" onclick="area(this)">北京</a><a class="area" onclick="area(this)">天津</a>
                    <a class="area" onclick="area(this)">河北</a><a class="area" onclick="area(this)">山西</a>
                    <a class="area" onclick="area(this)">内蒙古</a><a class="area" onclick="area(this)">辽宁</a>
                    <a class="area" onclick="area(this)">吉林</a><a class="area" onclick="area(this)">黑龙江</a>
                    <a class="area" onclick="area(this)">上海</a><a class="area" onclick="area(this)">江苏</a>
                    <a class="area" onclick="area(this)">浙江</a><a class="area" onclick="area(this)">安徽</a>
                    <a class="area" onclick="area(this)">福建</a><a class="area" onclick="area(this)">江西</a>
                    <a class="area" onclick="area(this)">山东</a><a class="area" onclick="area(this)">河南</a>
                    <a class="area" onclick="area(this)">湖北</a><a class="area" onclick="area(this)">湖南</a>
                    <a class="area" onclick="area(this)">广东</a><a class="area" onclick="area(this)">广西</a>
                    <a class="area" onclick="area(this)">海南</a><a class="area" onclick="area(this)">重庆</a>
                    <a class="area" onclick="area(this)">四川</a><a class="area" onclick="area(this)">贵州</a>
                    <a class="area" onclick="area(this)">云南</a><a class="area" onclick="area(this)">西藏</a>
                    <a class="area" onclick="area(this)">陕西</a><a class="area" onclick="area(this)">甘肃</a>
                    <a class="area" onclick="area(this)">青海</a><a class="area" onclick="area(this)">宁夏</a>
                    <a class="area" onclick="area(this)">新疆</a>
                </div>
                <div class="position">
                    <a href="/position">快速定位></a>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
